import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { itemDefaultProps } from './defaultProps';
import type { ItemOptions } from './type';
import ItemGroup from './ItemGroup';
import ItemImage from './ItemImage';
import ItemContent from './ItemContent';
import ItemHeader from './ItemHeader';
import ItemMeta from './ItemMeta';
import ItemDescription from './ItemDescription';
import ItemExtra from './ItemExtra';

export interface ItemProps extends ItemOptions, HTMLAttributes<HTMLDivElement> {}

interface ItemInterface extends FC<ItemProps> {
  Group: typeof ItemGroup;
  Image: typeof ItemImage;
  Content: typeof ItemContent;
  Header: typeof ItemHeader;
  Meta: typeof ItemMeta;
  Description: typeof ItemDescription;
  Extra: typeof ItemExtra;
}

const Item: ItemInterface = (props) => {
  const { className, children, forwardedRef, ...itemProps } = props;

  return createElement('div', { ref: forwardedRef, className: classNames('item', className), ...itemProps }, children);
};

Item.displayName = 'Item';
Item.defaultProps = itemDefaultProps;

Item.Group = ItemGroup;
Item.Image = ItemImage;
Item.Content = ItemContent;
Item.Header = ItemHeader;
Item.Meta = ItemMeta;
Item.Description = ItemDescription;
Item.Extra = ItemExtra;

export default Item;
